.ui-select {
  display: block;
  width: 100%;
  position: relative;
  border: var(--input-default-border);
  background-color: var(--input-default-background);
  color: var(--input-default-color);
  border-radius: 4px;
  background-image: url();
  background-repeat: no-repeat;
  background-position: calc(100% - 24px) 50%;
  height: 40px;
  text-align: left;
  cursor: pointer;
  font-size: 1.6rem;
  appearance: none;
  padding: 2px 16px;

  &:hover {
    border: 1px solid var(--grey500);
  }

  &:focus {
    outline: 0;
    border: 1px solid var(--grey600);
  }

  @media screen and (min-width: 768px) {
    font-size: 1.4rem;
  }
}

.ui-select:disabled,
.ui-select--disabled {
  background-color: var(--input-disabled-background);
  background-image: url();
  border: var(--input-disabled-border);
  color: var(--input-disabled-color);
  cursor: not-allowed;

  &:hover {
    border: 1px solid var(--grey200);
  }
}

.ui-select--read-only {
  background-color: var(--input-readonly-background);
  border: var(--input-readonly-border);
  color: var(--input-readonly-color);
  cursor: default;

  &:hover {
    border: 1px dashed var(--grey200);
  }
}

.ui-select--open {
  border-color: var(--grey300);
  background-color: var(--grey000);
}

.ui-select--invalid {
  border-color: var(--pink500);
}
